@charset "utf-8";
/* CSS Document */

/* this file only for index page
 * 此文件仅用于index页面
 *
 * 作者: 杨，2020年07月18日。	written by carryyang, 2020.07.18.
 * 拷贝此网站样式或使用相关源码请保留我的版权信息，谢谢！	Copy this website style or use relevant source code please keep my copyright information, thank you!
 */


/* | ----------------------- | Glide styles | ------------------------ | Here are slider styles | banner滚动轮播插件的个性样式，需要配合jquery.glide.min.js使用 */
.mainbanner {
    width: 100%;
    height: auto;
    font-size: 0px;
    background: url("../../images/bannerbg.jpg") center no-repeat fixed;
    padding-top: 15px;
    padding-bottom: 15px;
}
.mainbanner .mainbody{
    width: 100%;
    padding-top: 50%;
    position: relative;
}
.mainbanner .mainbody>div{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.mainbanner ul, .mainbanner ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    display: block;
}
.mainbanner ul li {
    float: left;
}
.slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slides {
    height: 100%;    /* Simple clear fix */
    overflow: hidden;    /**  * Prevent blinking issue * Not tested. Experimental. */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;    /** * Here is CSS transitions * responsible for slider animation in modern broswers */
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.slide {
    list-style: none;
    height: 100%;
    float: left;
    clear: none;
}
.slide a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}
.slide a>img {
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
}
.screen-phone .slide a>img {   
    max-width:100%;
    
}


.arrowsWrapper {
    display: none;
}
.slider:hover .arrowsWrapper {
    display: block
}
.slider-arrow {
    position: absolute;
    display: block;
    bottom: 47.5%;
    width: 5%;
    padding: 2.5%;
    text-decoration: none;
    text-align: center;
    opacity: 1;
}
.slider-arrow:hover {
    background: rgba(0,0,0,.3);
}
.slider-arrow--left {
    left: 2%;
    background: rgba(0,0,0,.15);
}
.slider-arrow--left:after {
    content: '';
    display: block;
    background: url(../../images/left_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
.slider-arrow--right {
    right: 2%;
    background: rgba(0,0,0,.15);
}
.slider-arrow--right:after {
    content: '';
    display: block;
    background: url(../../images/right_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
.slider-nav {
    position: absolute;
    top: 4%;
    right: 2%;
    text-align: center;
}
.slider-nav__item {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    clear: none;
    display: inline-block;
    margin: 0 4px;
    position: relative;
}
.slider-nav__item.slider-nav__item--current {
    background: #fff;
}


/* slider2 */
.slider2 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.slider2 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.slides2 {
    margin: 0px;
    padding: 0px;
    height: 100%;    /* Simple clear fix */
    overflow: hidden;    /**  * Prevent blinking issue * Not tested. Experimental. */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;    /** * Here is CSS transitions * responsible for slider animation in modern broswers */
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.slide2 {
    list-style: none;
    height: auto;
    float: left;
    clear: none;
    margin: 0px;
    padding: 0px;
}
.arrowsWrapper2 {
    display: block;
}
.slider2-arrow {
    position: absolute;
    display: block;
    bottom: 48%;
    margin-bottom: -2%;
    width: 4%;
    padding: 2%;
    background: rgba(0,0,0,.15);
    text-decoration: none;
    text-align: center;
    opacity: 1;
}
.slider2-arrow:hover {
    background: rgba(0,0,0,.3);
}
.slider2-arrow--left {
    left: 0;
}
.slider2-arrow--left:after {
    content: '';
    display: block;
    background: url(../../images/left_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
.slider2-arrow--right {
    right: 0;
}
.slider2-arrow--right:after {
    content: '';
    display: block;
    background: url(../../images/right_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
.slider2-nav {
    position: absolute;
    top: 4%;
    right: 2%;
    text-align: center;
}
.slider2-nav__item {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    clear: none;
    display: inline-block;
    margin: 0 4px;
    position: relative;
}
.slider2-nav__item.slider2-nav__item--current {
    background: #fff;
}
.slide2 .card{ border-radius: 0px;text-align: center;width: 100%;padding-top: 74%;margin-bottom: 0px;border: none;box-shadow: none;}
.slide2 .card>.title{ display: block;width: 100%;position: absolute;left: 0px;bottom: 0px;color: #343434;font-size: 14px;line-height: 30px;}
.slide2 .card>.imagebox{display:block;width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;}

/* 交货期 */
#jiaohuoqi{background: url("../../images/jiaohuoqi.jpg") no-repeat left bottom;background-size: cover;padding: 20px 20px;position: relative;}

/* 交货期 */
#pinzhibaozhang{background:#009c74  url("../../images/pinzhibaozhang.png") no-repeat left bottom;background-size:100%;padding: 20px 20px;color: #fff;position: relative;}


/* 友情链接 */
#flink .shengqingflink{display: block;float: right;color: #D53E13;font-size: 14px;}
#flink .shengqingflink>i{margin-right: 5px;color: #313131;}
.flink{padding: 10px 5%; }
.flink>a{display:inline-block;font-size: 14px;color: #656565;line-height: 30px;}
.flink>.symbol{display:inline-block;content: "";font-size: 14px;color: #656565;line-height: 30px;padding:0px 20px;}
.flink>.symbol:last-child{display:none;}


/* 资讯 */
#xinwen .mainbody{padding: 10px 20px;}


/* 资质 和资质里的 slider3 */
#zizhi { }
#zizhi .slider3 {
    padding: 0px;
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#zizhi .slider3 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#zizhi .slides3 {
    margin: 0px;
    padding: 0px;
    height: 100%;    /* Simple clear fix */
    overflow: hidden;    /**  * Prevent blinking issue * Not tested. Experimental. */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;    /** * Here is CSS transitions * responsible for slider animation in modern broswers */
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
#zizhi .slide3 {
    list-style: none;
    height: auto;
    float: left;
    clear: none;
    margin: 0px;
    padding: 0px;
}
#zizhi .arrowsWrapper3 {
    display: block;
}
#zizhi .slider3-arrow {
    position: absolute;
    display: block;
    bottom: 45%;
    width: 18%;
    padding: 9%;
    background: rgba(0,0,0,.15);
    text-decoration: none;
    text-align: center;
    opacity: 1;
}
#zizhi .slider3-arrow:hover {
    background: rgba(0,0,0,.3);
}
#zizhi .slider3-arrow--left {
    left: 0;
}
#zizhi .slider3-arrow--left:after {
    content: '';
    display: block;
    background: url(../../images/left_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
#zizhi .slider3-arrow--right {
    right: 0;
}
#zizhi .slider3-arrow--right:after {
    content: '';
    display: block;
    background: url(../../images/right_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
#zizhi .slider3-nav {
    position: absolute;
    top: 4%;
    right: 2%;
    text-align: center;
}
#zizhi .slider3-nav__item {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    clear: none;
    display: inline-block;
    margin: 0 4px;
    position: relative;
}
#zizhi .slider3-nav__item.slider3-nav__item--current {
    background: #fff;
}
#zizhi .slide3 .card{ border-radius: 0px;text-align: center;width: 100%;padding-top: 100%;margin-bottom: 0px;border: 0px;box-shadow: none;}
#zizhi .slide3 .card>.imagebox{display:block;width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;}
#zizhi .slide3 .card>.card-heading{font-size: 12px;color: #666;position: absolute; width: 90%;bottom: 0px;left: 5%;}


/* 关于 */
#guanyu .mainbody{padding:20px 20px 30px;}
#guanyu .mainbody .row .col{max-height: 268px;overflow: hidden;}
#guanyu .textbox h4{font-size: 14px;}
#guanyu .textbox span{font-size: 12px;color: #666;}
#guanyu .textbox .more{font-size: 12px;display: block;width: 70px;height: 24px; line-height: 24px;background-color: #FC9632;color: #fff;border: 1px solid #ddd;text-align: center;margin-top: 10px;}
#guanyu .textbox .more:hover{background-color: #009946;text-decoration: none;}


/* 客户满意度评价 和 案例简单列表 */
#kehupingjia,#anli2{background: #fff;border: 1px solid #ddd;padding: 22px 0px;}
#kehupingjia .news-img-list .item .itembox .img{padding-top: 20%;}
#anli2{padding: 0px 10px 10px;}


/* 案例 和 案例里的 slider4 */
#anli .mainbody{padding: 10px 20px;}
.slider4 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#anli .slider4 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#anli .slides4 {
    margin: 0px;
    padding: 0px;
    height: 100%;    /* Simple clear fix */
    overflow: hidden;    /**  * Prevent blinking issue * Not tested. Experimental. */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;    /** * Here is CSS transitions * responsible for slider animation in modern broswers */
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
#anli .slide4 {
    list-style: none;
    height: auto;
    float: left;
    clear: none;
    margin: 0px;
    padding: 0px;
}
#anli .arrowsWrapper4 {
    display: block;
}
#anli .slider4-arrow {
    position: absolute;
    display: block;
    bottom: 48%;
    width: 4%;
    padding: 2%;
    background: rgba(0,0,0,.30);
    text-decoration: none;
    text-align: center;
    opacity: 1;
}
#anli .slider4-arrow:hover {
    background: rgba(0,0,0,.50);
}
#anli .slider4-arrow--left {
    left: 0;
}
#anli .slider4-arrow--left:after {
    content: '';
    display: block;
    background: url(../../images/left_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
#anli .slider4-arrow--right {
    right: 0;
}
#anli .slider4-arrow--right:after {
    content: '';
    display: block;
    background: url(../../images/right_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
#anli .slider4-nav {
    position: absolute;
    top: 4%;
    right: 2%;
    text-align: center;
}
#anli .slider4-nav__item {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    clear: none;
    display: inline-block;
    margin: 0 4px;
    position: relative;
}
#anli .slider4-nav__item.slider4-nav__item--current {
    background: #fff;
}
#anli .slide4 .card{ border-radius: 0px;text-align: center;width: 100%;padding-top: 80%;margin-bottom: 0px;border: none;box-shadow: none;}
#anli .slide4 .card>.title{ display: block;width: 96%;position: absolute;left: 2%;top:80%;color: #343434;font-size: 14px;line-height: 30px;}
#anli .slide4 .card>.imagebox{display:block;width: 96%;height: 80%;position: absolute;top: 0px;left: 2%;}

/* 合和五金    国内五金配件一线品牌 */
#hhjzwj{ width: 100%;padding: 20% 6% 5%;background:#fff url("../../images/hhjzwj_banner.png") top center no-repeat;background-size: 100% auto;}


/* 经典客户logo 和 slider5 */
#kehulogo .mainbody{padding: 0px;}
.slider5 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#kehulogo .slider5 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}
#kehulogo .slides5 {
    margin: 0px;
    padding: 0px;
    height: 100%;    /* Simple clear fix */
    overflow: hidden;    /**  * Prevent blinking issue * Not tested. Experimental. */
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;    /** * Here is CSS transitions * responsible for slider animation in modern broswers */
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
#kehulogo .slide5 {
    list-style: none;
    height: auto;
    float: left;
    clear: none;
    margin: 0px;
    padding: 0px;
}
#kehulogo .arrowsWrapper5 {
    display: block;
}
#kehulogo .slider5-arrow {
    position: absolute;
    display: block;
    bottom: 48%;
    width: 4%;
    padding: 2%;
    background: rgba(0,0,0,.30);
    text-decoration: none;
    text-align: center;
    opacity: 1;
}
#kehulogo .slider5-arrow:hover {
    background: rgba(0,0,0,.50);
}
#kehulogo .slider5-arrow--left {
    left: 0;
}
#kehulogo .slider5-arrow--left:after {
    content: '';
    display: block;
    background: url(../../images/left_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
#kehulogo .slider5-arrow--right {
    right: 0;
}
#kehulogo .slider5-arrow--right:after {
    content: '';
    display: block;
    background: url(../../images/right_jt.png) no-repeat center;
    background-size: 100%;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 27%;
}
#kehulogo .slider5-nav {
    position: absolute;
    top: 4%;
    right: 2%;
    text-align: center;
}
#kehulogo .slider5-nav__item {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    clear: none;
    display: inline-block;
    margin: 0 4px;
    position: relative;
}
#kehulogo .slider5-nav__item.slider5-nav__item--current {
    background: #fff;
}
#kehulogo .slide5 .card{ border-radius: 0px;text-align: center;width: 100%;padding-top: 60%;margin-bottom: 0px;border: none;box-shadow: none;}
#kehulogo .slide5 .card>.title{ display: block;width: 96%;position: absolute;left: 2%;top:80%;color: #343434;font-size: 14px;line-height: 30px;}
#kehulogo .slide5 .card>.imagebox{display:block;width: 96%;height: 80%;position: absolute;top: 0px;left: 2%;}


/* 解决方案 */
#jjfangan{width: 100%;position: relative;padding-top: 60%; background: #fff;border: 1px solid #F2F2F2;}
#jjfangan>div{width: 100%;height: 100%;display: block;position: absolute;left: 0px;top:0px;}
#jjfangan  .jjfanganbox{width: 100%;height: 100%;display: block;position: relative;}